<script setup lang="ts">
import EditAddress from "@/components/address/EditAddress.vue"
import type { AddressType } from "@/type/lidare"
import { useRouter } from "vue-router"
import { ref, onActivated,watch } from 'vue'
import { showToast } from "vant"
import { useAddressStore } from "@/stores/counter"
import { storeToRefs } from "pinia"
const strore = useAddressStore();
const { addressList, nowSelectAddress } = storeToRefs(strore);
const { changeSelectAddress } = strore;

const router = useRouter();
const chosenAddressId = ref('1');
onActivated(() => {
  if (!nowSelectAddress.value?.id) {
    addressList.value.forEach(el => {
      if (el.isDefault) {
        chosenAddressId.value = el.id;
        changeSelectAddress(el);
      }
    });
  } else {
    chosenAddressId.value = nowSelectAddress.value.id;
  }
});
watch(chosenAddressId,(id)=>{
  let item = addressList.value.find(el=>el.id==id) as AddressType;
  changeSelectAddress(item);
})
const disabledList: Array<AddressType> = [];

const showAddAddress = ref(false);
const onAdd = () => showToast('新增地址');
const onEdit = (item: AddressType, index: number) => showToast('编辑地址:' + index);
</script>
<template>
  <div class="fixed-zbest address-view">
    <header class="header">
      <van-icon @click.stop="router.go(-1)" class="icon" name="arrow-left" />
      <div class="header-text">收货地址</div>
    </header>
    <van-address-list class="animate__animated animate__fadeIn" v-model="chosenAddressId" :list="addressList"
      :disabled-list="disabledList" disabled-text="以下地址超出配送范围" default-tag-text="默认" add-button-text="新增收货地址"
      @add="showAddAddress = true" @edit="onEdit" />
    <EditAddress v-if="showAddAddress" @closeThisComponent="showAddAddress = !showAddAddress" />
  </div>
</template>
<style lang="scss" scoped>
.address-view {
  width: 100%;
  overflow: scroll;
  background-color: var(--bgc-gray);
  box-sizing: border-box;

  &::-webkit-scrollbar {
    display: none;
  }

  .header {
    position: sticky;
    left: 0;
    top: 0;
    z-index: 10;
    width: 100%;
    height: .5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    padding: 0 .15rem;
    background-color: var(--bgc-white);

    .icon {
      font-size: .2rem;
      color: var(--text-gray);
    }

    .header-text {
      flex-grow: 1;
      text-align: center;
      font-size: .16rem;
    }
  }

  .content {
    width: 100%;
    box-sizing: border-box;
    padding: .1rem;

    .address-item {
      width: 100%;
      box-sizing: border-box;
      padding: .1rem;
      background-color: var(--bgc-white);
      border-radius: .06rem;
    }
  }
}
</style>
<style lang="scss">
.address-view {
  .van-tag--primary {
    background-color: var(--text-red) !important;
  }

  .van-radio__icon--checked .van-icon {
    background-color: var(--text-red) !important;
    border-color: var(--text-red) !important;
  }

  .van-address-list {
    box-sizing: border-box;
  }

  .van-address-list__bottom {
    padding: 0 .1rem;
  }

  .van-address-list__add {
    background-color: var(--bgc-red);
    background-image: linear-gradient(to right top, var(--bgc-red), var(--bgc-red-deep));
    border: none;
    border-radius: 0.04rem;
  }
}
</style>